<template>
  <div class="radio">
    <Title :title="title" :radio="radio"></Title>
    <div class="content">
      <div class="wrap">
        <Radio v-for="v in arr" :key="v.id * 4" :v="v" />
      </div>
    </div>
  </div>
</template>
<script>
import Title from "../components/title.component.vue";
import Radio from "../components/radio.component.vue";
export default {
  data() {
    return {
      title: "广播电台",
      radio: "24小时播客",
      arr: [
        {
          src: "http://p1.music.126.net/KkYmNkzIbhesefjKOxuBrQ==/109951166347404650.jpg",
          title: "年代878",
          id: 111,
        },
        {
          src: "http://p1.music.126.net/KkYmNkzIbhesefjKOxuBrQ==/109951166347404650.jpg",
          title: "年代878",
          id: 112,
        },
        {
          src: "http://p1.music.126.net/KkYmNkzIbhesefjKOxuBrQ==/109951166347404650.jpg",
          title: "年代878",
          id: 113,
        },
        {
          src: "http://p1.music.126.net/KkYmNkzIbhesefjKOxuBrQ==/109951166347404650.jpg",
          title: "年代878",
          id: 114,
        },
        {
          src: "http://p1.music.126.net/KkYmNkzIbhesefjKOxuBrQ==/109951166347404650.jpg",
          title: "年代878",
          id: 115,
        },
      ],
    };
  },
  components: {
    Title,
    Radio,
  },
};
</script>
<style lang="less" scoped>
.radio {
  height: 4.04rem;
  padding: 0.32rem 0 0.34rem 0.3rem;
  background-color: #fff;
  border-radius: 0.16rem;
  margin-bottom: 0.19rem;
}
.content {
  overflow: auto;
  .wrap {
    display: flex;
  }
}
/*隐藏滚动条*/
::-webkit-scrollbar {
  display: none;
}
</style>
